<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card>
          <div>
            <h1>作业信息</h1>
            <div class="info-row">
              <p>作业名: {{ homeworkInfo.name }}</p>
            </div>
            <div class="info-row">
              <p>班级: {{ homeworkInfo.className }}</p>
              <p class="info-spacing">发布者: {{ homeworkInfo.author }}</p>

            </div>
            <div class="info-row">
              <p>创建日期: {{ homeworkInfo.createTime }}</p>
              <p class="info-spacing">截止日期: {{ homeworkInfo.expireTime }}</p>
            </div>
            <div class="info-row">
              <p>是否自动命名: <span :class="{ 'is-true': homeworkInfo.autoname, 'is-false': !homeworkInfo.autoname }">{{
                homeworkInfo.autoname ? '是' : '否' }}</span></p>
              <p class="info-spacing">命名规则: {{ homeworkInfo.autonameFormat }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7.5">
        <el-card>
          <el-upload class="upload-demo" drag action :auto-upload="false" :on-change="fileUpload" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="this.isAuthor == true">
      <el-card id="downloadAll">
        <template>
          <el-button type="primary" @click="downloadAllPre()" plain>下载全部</el-button>
        </template>
      </el-card>
    </el-row>
    <el-row>
      <el-card id="list">
        <el-table :data="fileList" stripe style="width: 100%">
          <el-table-column prop="date" align="center" label="#" width="80">
            <!-- (pageNo-1)*pageSize+index+1 -->
            <template slot-scope="scope">
              {{ (searchModal.pageNo - 1) * searchModal.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="stuName" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="fileName" label="文件名" align="center">
          </el-table-column>
          <!-- <el-table-column prop="addr" label="下载地址" align="center">
            </el-table-column> -->
          <el-table-column fixed="right" prop="operator" label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button type="primary" @click="download(scope.row)" plain>下载</el-button>
              <el-button type="primary" @click="deleteFile(scope.row)" plain>删除</el-button>
              <!-- <el-button type="danger" @click="deleteHomework(scope.row)" plain>删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页组件 -->
      <!-- <el-card>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchModal.pageNo" :page-sizes="[5, 10, 50, 100]" :page-size="searchModal.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-card> -->
    </el-row>

    <!-- 下载全部对话框 -->
    <el-dialog @close='clearForm' id="add" :visible.sync="dialogVisible">
      <el-row>
        <el-button type="primary" @click="downloadAll()" plain>发送压缩请求</el-button>
      </el-row>
      <el-row>
        <el-table :data="zipFileList" stripe style="width: 100%">
          <el-table-column prop="addr" label="下载地址" align="center">
          </el-table-column>
          <el-table-column fixed="right" prop="operator" label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button type="primary" @click="download(scope.row)" plain>下载</el-button>
              <el-button type="primary" @click="deleteFile(scope.row)" plain>删除</el-button>
              <!-- <el-button type="danger" @click="deleteHomework(scope.row)" plain>删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import fileapi from '@/api/file'
import { getToken } from '@/utils/auth';
import homeworkApi from '@/api/homework';
import file from '@/api/file';

export default {
  data() {
    return {
      total: 0,
      searchModal: {
        pageNo: 1,
        pageSize: 10
      },
      fileModal: {},
      fileList: [],
      zipFileList: [],
      homeworkInfo: {},
      name: "indexJK",
      isAuthor: false,
      dialogVisible: false
    }
  },
  methods: {
    beforeUpload(file) {
      console.log(file);
    },
    fileUpload(file) {
      const id = this.$route.params.id;
      const token = getToken();
      let fileData = new FormData()
      fileData.append('file', file.raw)
      // file1.append("fileType", 'IMAGE');
      fileapi.upload(fileData, id, token).then(response => {
        if (response.code == 20000) {
          this.$message({
            message: response.message,
            type: 'success'
          })
        }
        this.getWorkfile();
      })
    },
    download(row) {
      console.log(row.addr);
      window.location.href = row.addr;
    },
    downloadAllPre() {
      this.getZipList();
      this.dialogVisible = true;
    },
    downloadAll() {
      const id = this.$route.params.id;
      const token = getToken();
      fileapi.downloadAll(id, token).then(response => {
        if (response.code == 20000) {
          this.$message({
            message: response.message,
            type: '成功'
          })
        }
        this.getZipList();
      })
    },
    getZipList() {
      const id = this.$route.params.id;
      fileapi.getZipList(id).then(response => {
        if (response.code == 20000) {
          this.zipFileList = response.data;
        }
      })
    },
    getHomeworkInfo() {
      const id = this.$route.params.id;
      homeworkApi.getHomeworkInfo(id).then(response => {
        if (response.code == 20000) {
          this.homeworkInfo = response.data;
        }
      })
    },
    getWorkfile() {
      const id = this.$route.params.id;
      const token = getToken();
      fileapi.getfileList(token, id).then(response => {
        if (response.code == 20000) {
          this.fileList = response.data;
          if (this.fileList.length > 20) this.isAuthor = true;
        }
      })
    },
    deleteFile(row) {
      const fileId = row.id
      console.log(fileId);
      fileapi.deleteOne(fileId).then(response => {
        if (response.code == 20000) {
          this.$message({
            message: response.message,
            type: 'success'
          })
        }
        else {
          this.$message({
            message: response.message,
            type: 'error'
          })
        }
        this.getZipList();
        this.getWorkfile();
      })
    },
    clearForm() {
      this.fileModal = {};
    },
  },
  created() {
    this.getHomeworkInfo();
    this.getWorkfile();
  }
};
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 100%;
}

.info-row {
  display: flex;
  justify-content: space-between;
}

.info-spacing {
  margin-right: 200px;
  /* 调整间隔大小 */
}

/* 是的样式 */
.is-true {
  background: linear-gradient(45deg, #00cc00, #006600);
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
  display: inline-block;
}

/* 否的样式 */
.is-false {
  background: linear-gradient(45deg, #ff0000, #990000);
  border-radius: 5px;
  color: white;
  padding: 5px 10px;
  display: inline-block;
}

/* .el-input {
  width: 200px;
  margin-right: 10px;
} */
</style>